import { editUserInfo, isLogin } from '@/services';
import ProCard from '@ant-design/pro-card';
import type { ProFormInstance } from '@ant-design/pro-form';
import { useModel } from '@umijs/max';
import { FormCustom } from '@vh-admin/pro-components';
import { eventsBusFn } from '@vh-admin/pro-utils';
import { Avatar, Menu, message, Space, Typography } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { formConfig, passwordFormConfig } from './define';
const eventsBus = eventsBusFn();

const { Text } = Typography;

function PublicUserInfo() {
  const [tab, setTab] = useState<string>('tab1');
  const { user, updateUser } = useModel('useUserModel');
  const formRef = useRef<ProFormInstance>();

  useEffect(() => {
    eventsBus.$emit('setPageContainerConfig', {
      header: {
        title: null,
        breadcrumb: {},
      },
    });
    isLogin().then((res: any) => {
      updateUser(res.data);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onFinish = async (type: string, values: any) => {
    editUserInfo(values)
      .then((res: any) => {
        updateUser(res.data);
        message.success('修改成功');
        if (type === 'password') {
          formRef.current?.resetFields();
        }
      })
      .catch((e: any) => {
        console.log(e.info);
      });
  };

  return (
    <>
      <ProCard
        split="horizontal"
        gutter={[0, 16]}
        ghost
        style={{ minHeight: '100%', marginBottom: 24 }}
      >
        <ProCard loading={!user.id} style={{ minHeight: 150 }}>
          <Space direction="horizontal" size="large">
            <Avatar size={120} src={user.headimg} />
            <Space direction="vertical">
              <Text type="secondary" strong>
                {user.account} | {user.name}
              </Text>
              <Text type="secondary" strong>
                {user.role_name}
              </Text>
              <Space direction="horizontal">
                <Text type="secondary" strong>
                  {user.phone}
                </Text>
                {user.status === 1 ? (
                  <Text type="success" strong>
                    正常
                  </Text>
                ) : (
                  <Text type="danger" strong>
                    异常
                  </Text>
                )}
              </Space>
              <Text type="secondary" strong>
                最后登录时间:{user.last_login_at}
              </Text>
            </Space>
          </Space>
        </ProCard>
        <ProCard loading={!user.id} split="vertical" gutter={[0, 0]} style={{ paddingTop: 10 }}>
          <Menu
            style={{ width: '256px' }}
            mode="inline"
            defaultSelectedKeys={['tab1']}
            onClick={({ key }: any) => {
              setTab(key);
            }}
            items={[
              {
                key: 'tab1',
                label: '基本设置',
              },
              {
                key: 'tab3',
                label: '修改密码',
              },
            ]}
          />

          {tab === 'tab1' && (
            <ProCard loading={!user.id} title="基本设置">
              <FormCustom
                initialValues={user}
                submitter={{
                  searchConfig: {
                    submitText: '保存',
                  },
                  render: (_: any, dom: any) => dom.pop(),
                }}
                columns={formConfig}
                onFinish={onFinish.bind(null, 'edit')}
              />
            </ProCard>
          )}
          {tab === 'tab3' && (
            <ProCard loading={!user.id} title="修改密码">
              <FormCustom
                formRef={formRef}
                submitter={{
                  searchConfig: {
                    submitText: '保存',
                  },
                  render: (_: any, dom: any) => dom.pop(),
                }}
                columns={passwordFormConfig}
                onFinish={onFinish.bind(null, 'password')}
              />
            </ProCard>
          )}
        </ProCard>
      </ProCard>
    </>
  );
}

export default PublicUserInfo;
